<template>
    <el-card class="layout" style="width: 100%" shadow="never">
        <div class="pre">
            <div class="pre_title">
                <span class="title-text">{{ props.title }}</span>
                <el-button :disabled="props.browseData.length == 0" @click="export2Img(myRef_one, props.title)"
                    >导出</el-button
                >
            </div>
            <div v-show="isNoMessage1" id="echarts" ref="myRef_one" class="min"></div>
            <div v-show="!isNoMessage1" class="no_data">
                <img class="no_img" src="@/assets/noData.png" alt="" />
                <div class="no_title">暂无数据</div>
            </div>
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import { ref, inject, onMounted, nextTick, computed, watch } from 'vue';
import { export2Img } from '@/utils/utils';
const echarts = inject('ec');
const myRef_one = ref();
const isNoMessage1 = ref(false);
const props = defineProps(['title', 'browseData', 'tagData', 'weChart', 'thumbsData', 'commentData', 'monmentTagData']);

const getEcharts2 = (data: any) => {
    if (data.length <= 0) {
        isNoMessage1.value = false;
        return;
    } else {
        isNoMessage1.value = true;
    }
    const myChart_one = echarts.init(myRef_one.value);
    myChart_one.setOption({
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: props.title,
                type: 'pie',
                data: data,
                label: {
                    normal: {
                        show: true,
                        formatter: '{b} {d}%' //自定义显示格式(b:name, c:value, d:百分比)
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function (val: any) {
                                const echartsData = data;
                                let total = 0;
                                let tarValue = 0;
                                for (let i = 0, l = echartsData.length; i < l; i++) {
                                    total += Number(echartsData[i].value);
                                    if (echartsData[i].name == val.name) {
                                        tarValue = echartsData[i].value;
                                    }
                                }
                            }
                        },
                        labelLine: { show: true }
                    }
                },
                color: ['#ff0000', '#ff8364', '#ffb988', '#fde860', '#ffbe49', '#b50000'],
                radius: '50%'
            }
        ]
    });
    nextTick(() => {
        myChart_one.resize();
    });
    window.onresize = function () {
        myChart_one.resize();
    };
};
watch(
    () => props.browseData,
    val => {
        getEcharts2(val);
    }
);
</script>

<style lang="scss" scoped>
.layout {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    :deep(.el-card__body) {
        width: 100%;
        box-sizing: border-box;
    }

    .pre {
        // flex: 1;
        height: 546px;
        box-sizing: border-box;
        background: #fff;
        margin-bottom: 1%;

        &_title {
            width: 100%;
            padding-bottom: 14px;
            border-bottom: 1px solid #eaeaea;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 9999;
        }

        .title-text {
            font-size: 16px;
            font-weight: 500;
        }

        .min {
            width: 39vw;
            height: 400px;
            margin: 0 auto;
        }
    }

    .no_data {
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .no_img {
            margin-left: 24px;
        }

        .no_title {
            color: #909399;
            font-size: 14px;
        }
    }
}
</style>
